<template>
  <div class="page-404">
    <el-result title="404" subTitle="">
      <template #icon>
        <div class="img-404">
          <el-image :src="errorPage" fit="fit"></el-image>
        </div>
      </template>
      <template #extra>
        <el-button type="primary" size="small" @click="gotoHome">返回首页</el-button>
      </template>
    </el-result>
  </div>
</template>

<script>
import noPng from "@/assets/images/common/404.svg";

export default {
  name: "PageNotFound",
  data() {
    return {
      errorPage: noPng,
    };
  },
  methods: {
    gotoHome() {
      this.$router.push("/");
    },
  },
};
</script>

<style lang="scss" scoped>
.page-404 {
  padding-top: 200px;

  .img-404 {
    width: 300px;
  }

  & :deep(.el-result__title) {
    p {
      font-weight: bold;
      font-size: 36px;
      letter-spacing: 10px;
    }
  }
}
</style>
